<template>
  <div>
    <div class="content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-steps :active="active">
            <el-step title="项目须知" description="项目新建所需要了解的内容"></el-step>
            <el-step title="填写项目信息" description="项目名称和内容等"></el-step>
            <el-step title="新建完毕" description="引导提示"></el-step>
          </el-steps>
        </div>
        <el-steps :space="100" direction="vertical" class="description" v-if="active == 1">
          <el-step title="填写项目信息，向项目绑定网关" icon="edit"></el-step>
          <el-step title="用户和权限：设置项目的成员，以及访问权限" icon="upload"></el-step>
          <el-step title="基本的项目创建与配置完成后，可以设置组态画面，进行图形化数据展示" icon="picture"></el-step>
        </el-steps>
        <div v-if="active == 2">
          <el-form :label-position="labelPosition" :rules="rules" label-width="90px" :model="formData" ref="formData">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="省">
              <el-input v-model="formData.province" placeholder="例如：四川省"></el-input>
            </el-form-item>
            <el-form-item label="市">
              <el-input v-model="formData.city" placeholder="例如：成都市"></el-input>
            </el-form-item>
            <el-form-item label="甲方单位">
              <el-input v-model="formData.employer" placeholder="例如：XXX工程机械有限公司"></el-input>
            </el-form-item>
            <el-form-item label="采购日期" prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="formData.purchaseDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="竣工日期" prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="formData.completionDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="联系人姓名">
              <el-input v-model="formData.contactName" placeholder="例如：张三"></el-input>
            </el-form-item>
            <el-form-item label="客户类型">
              <el-input v-model="formData.customType" placeholder="例如：普通客户（自定义）"></el-input>
            </el-form-item>
            <el-form-item label="项目类型">
              <el-input v-model="formData.projectType" placeholder="例如：施工项目（自定义）"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="formData.address" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="安装时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="formData.installationDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="联系人电话">
              <el-input v-model="formData.contactPhone" placeholder="手机号或座机都可以"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="active == 3">
          <div v-if="!showSetting">
            <p class="success-info">项目创建成功!</p>
            <p>请做如下设置：</p>
            <el-menu mode="vertical" class="el-menu-vertical-demo">
              <el-menu-item index="1">1、设置该项目对应的网关，显示采集的实时数据、历史数据和告警。
                <el-button type="primary" class="success-operate" @click.stop="deviceSetting">关联网关</el-button>
              </el-menu-item>
              <el-menu-item index="2">2、设置该项目的组态画面。 组态画面。
                <el-button type="primary" class="success-operate" @click.stop="topoSetting">组态画面</el-button>
              </el-menu-item>
              <el-menu-item index="3">3、设置该项目显示的功能模块。
                <el-button type="primary" class="success-operate" @click.stop="moduleSetting">模块设置</el-button>
              </el-menu-item>
            </el-menu>
          </div>
          <div v-if="showSetting">
            <div style="padding-bottom: 10px;margin-bottom:10px;border-bottom:1px solid #eef1f5;">
              <el-button @click="goSetting">返回</el-button>
            </div>
            <modulesetting v-if="projectSetting.showModuleSetting" @save-module-setting="settingModuleInfo" :config="moduleConfig"></modulesetting>
            <devicelist v-if="projectSetting.showDeviceSetting" @save-device-setting="settingDeviceInfo" :project-id="projectId" :info="projectData"></devicelist>
            <topo v-if="projectSetting.showTopoSetting" :project-id="projectId"></topo>
          </div>
        </div>
        <el-button type="primary" @click="next" v-if="active == 1">下一步</el-button>
        <el-button type="primary" @click="save" v-if="active == 2">保存</el-button>
        <el-button type="primary" @click="reset('formData')" v-if="active == 2">重置</el-button>
        <el-button type="primary" @click="back" v-if="active == 2">上一步</el-button>
      </el-card>
    </div>
  </div>
</template>
<script>
import modulesetting from './../common/modulesetting'
import devicelist from './../common/devicelist'
import topo from './../common/topo'
import _ from 'lodash'

export default {
  name: 'addproject',
  data () {
    return {
      active: 1,
      showSetting: false, // 显示第三步中的某一项设置
      projectSetting: {
        showModuleSetting: false, // 模块设置
        showDeviceSetting: false, // 网关设置
        showTopoSetting: false // 组态画面设置
      },
      labelPosition: 'right',
      formData: {
        companyId: null,
        name: '',
        province: '',
        city: '',
        latitude: null,
        longitude: null,
        employer: '',
        purchaseDate: '', // 购买日期
        completionDate: '', // 竣工日期
        contactName: '',
        customType: '', // 客户类型
        projectType: '', // 项目类型
        address: '',
        installationDate: '',
        contactPhone: '',
        gateways: []
      },
      rules: {
        name: [
          { required: true, message: '项目名称是必填项', trigger: 'blur' }
        ]
      },
      resData: {},
      projectId: null,
      projectData: null,
      moduleConfig: null
    }
  },
  components: {
    modulesetting,
    devicelist,
    topo
  },
  computed: {
    companyId () {
      let user = JSON.parse(sessionStorage.getItem('user'))
      if (user) {
        return user.id
      }
    }
  },
  methods: {
    next () {
      if (this.active++ > 2) this.active = 1
    },
    back () {
      this.active = 1
    },
    save (status) {
      // 第二步，保存项目信息
      this.formData.companyId = this.companyId
      this.$http.post('/project/create', this.formData).then((res) => {
        this.resData = res.data
        this.projectId = this.resData.id
        this.active = 3
        if (status) {
          this.goSetting()
        }
      })
    },
    reset (formName) {
      this.$refs[formName].resetFields()
    },
    moduleSetting () {
      this.showSetting = true
      _.each(this.projectSetting, (item, key) => {
        this.projectSetting[key] = false
      })
      this.projectSetting.showModuleSetting = true
      this.$http.get('/project/module/find?project_id=' + this.projectId).then((res) => {
        this.moduleConfig = res.data
      })
    },
    deviceSetting () {
      this.showSetting = true
      _.each(this.projectSetting, (item, key) => {
        this.projectSetting[key] = false
      })
      this.projectSetting.showDeviceSetting = true
      // 请求项目信息
      this.$http.get('/project/find?id=' + this.projectId).then((res) => {
        this.projectData = res.data
      })
    },
    topoSetting () {
      this.showSetting = true
      _.each(this.projectSetting, (item, key) => {
        this.projectSetting[key] = false
      })
      this.projectSetting.showTopoSetting = true
    },
    goSetting () {
      this.showSetting = false
    },
    settingModuleInfo (e) {
      // 保存模块设置
      var moduleSet = e
      moduleSet.id = this.projectId
      this.$http.post('/project/module/update', moduleSet).then((res) => {
        this.goSetting()
      })
    },
    settingDeviceInfo (e) {
      // 网关设置
      this.formData.gateways = _.map(e, (item) => {
        return item.deviceId
      })
      this.save(this.projectSetting.showDeviceSetting)
    }
  }
}
</script>
<style lang="stylus" scoped>
.content {
  padding: 20px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-step.is-vertical {
  width: 100%;
  height: 100px;
}
.el-step__description {
  display: inline-block;
}
.success-info {
  font-size: 24px;
}
.el-menu {
  margin-top: 30px;
  background-color: #fff;
}

li.el-menu-item {
  border: 1px solid #fafafa;
  background-color: #eef1f6;
  margin-bottom: 25px;
}
.success-operate {
  float:right;
  margin-top:8px;
}
</style>
